<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>01_复习-滚动条</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html,body {
                height: 100%;
                overflow: hidden;
            }

            .wrapper {
                position: relative;
                width: 100%;
                height: 100%;
            }

            .wrapper .scroll {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 30px;
                background-color: aqua;
                border-left: 1px solid #000;
                border-right: 1px solid #000;
            }

            .wrapper .scroll .scrollIn {
                position: absolute;
                width: 30px;
                /* height: 100px; */
                background-color: hotpink;
            }

            .wrapper .content {
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="content"></div>

            <div class="scroll">
                <div class="scrollIn"></div>
            </div>
        </div>

        <script>
            var scrollIn = document.querySelector('.wrapper .scroll .scrollIn');

            var content = document.querySelector('.content');

            for(var i = 1; i <= 200; i++){
                content.innerHTML += i + '<br>';
            }

            // 滑块高度        滑槽高度
            // ------    =    -------
            // 滑槽高度        内容高度
            var scale = document.documentElement.clientHeight / content.offsetHeight;

            var scrollIn_h = document.documentElement.clientHeight * scale;

            scrollIn.style.height = scrollIn_h + 'px';


            scrollIn.onmousedown = function(event){
                var eleY = scrollIn.offsetTop;

                var startY = event.clientY;

                document.onmousemove = function(event){
                    var endY = event.clientY;

                    var disY = endY - startY;

                    var lastY = eleY + disY;

                    if(lastY >= document.documentElement.clientHeight - scrollIn.offsetHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.offsetHeight
                    }else if(lastY <= 0){
                        lastY = 0;
                    }

                    scrollIn.style.top = lastY + 'px';

                     // 滑块高度        滑槽高度      滑块移动距离(滑块最终的位置)
                     // ------    =    -------   =   ---------
                     // 滑槽高度        内容高度      内容移动距离

                     var content_dis = lastY / scale;

                     content.style.top = -content_dis + 'px';
 

                }

                document.onmouseup = function(){
                    document.onmousemove = document.onmouseup = null;
                }

                return false;
            }
        
            
            function move(event){

                var flag;

                if(event.wheelDelta){
                    if(event.wheelDelta > 0){
                        flag = true;
                    }else {
                        flag = false;
                    }
                }else if(event.detail){
                    if(event.detail < 0){
                        flag = true;
                    }else {
                        flag = false;
                    }
                }

                if(flag){
                    var lastY = scrollIn.offsetTop - 10;

                    if(lastY <= 0){
                        lastY = 0;
                    }

                    scrollIn.style.top = lastY + 'px';

                    var content_dis = lastY / scale;

                     content.style.top = -content_dis + 'px';
                }else {
                    var lastY = scrollIn.offsetTop + 10;
                    if(lastY >= document.documentElement.clientHeight - scrollIn.offsetHeight){
                        lastY = document.documentElement.clientHeight - scrollIn.offsetHeight
                    }
                    scrollIn.style.top = lastY + 'px';

                    var content_dis = lastY / scale;

                     content.style.top = -content_dis + 'px';
                }



            }


            document.addEventListener('mousewheel',move);
            document.addEventListener('DOMMouseScroll',move);
            
            
        
        </script>
    </body>
</html>